<!--
 * @Author: your name
 * @Date: 2020-12-17 09:04:18
 * @LastEditTime: 2020-12-25 16:18:50
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\alarm\alarmTypeDefine\import.vue
-->
<template>
    <div>
        <el-dialog
            :title="$t('import')"
            :visible="visibleShow"
            class="el-dialog-sm"
            @close="()=>{$store.commit('setVisibleShow',false)}">
            <el-form ref="form" :model="form" label-width="200px" >
                <el-row :gutter="24">
                    <el-col :span="20">
                        <el-form-item :label="$t('card.cardType')" prop="cardType" :rules="[{ required: true, message: $t('pleaseSelect')}]">
                            <el-select v-model="form.cardType" filterable :placeholder="$t('pleaseSelect')">
                                <el-option
                                v-for="item in cardTypeArray"
                                :key="item.value"
                                :label="item.code"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item :label="$t('card.groupId')" prop="groupId" :rules="[{ required: true, message: $t('pleaseSelect')}]">
                            <el-input v-model="form.groupId" disabled></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('version.versionService.fileURL')" prop="file" :rules="[{ required: true, message: $t('pleaseSelect')}]">
                            <baseFile v-model="form.file"></baseFile>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <div class="alert">
                        <span class="warning-con">
                            {{$t('version.versionAdd.filemustbe')}}:
                            {{$t('card.upload.contains')}}
                        </span>
                    </div>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="()=>{$store.commit('setVisibleShow',false)}">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="save('form')">{{$t('save')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import baseFile from '../../../components/common/baseFileInput'
export default {
    components:{
        baseFile
    },
    props: {
        cardTypeArray:''
    },
    data() {
        return {
            form:{
                cardType:'',
                groupId:'',
                file:''
            }
        };
    },
    computed: {
        visibleShow(){
            return this.$store.state.sysStore.visibleShow
        }
    },
    mounted(){
        this.getDptBusinessByUserId()

    },
    methods: {
        async getDptBusinessByUserId(){
            let res=await this.API.getDptBusinessByUserId({})
            this.form.groupId=res?res.cardGroupId:'57171509519'

        },
        save(formName){
            this.$refs[formName].validate(async (valid) => {
              if (valid) {
                  this.commitForm()
              } else {
                console.log('error submit!!');
                return false;
              }
            });
        },
        async commitForm(){
            let data = await this.API.gprsImportCardBasicinfo(this.form)
            if(data === '1'){
                this.$message.error(this.$t('version.versionAdd.formatError'))
            }else if(data === '2'){
                this.$message.error(this.$t('index_js_notNull'))
            }else if(data === '3'){
                this.$message.error(this.$t('alarmpush.mysqlError'))
            }else if(data === '0'){
                this.$message.success(this.$t('index.control_success'))
                this.$emit('uploadData')
                this.$store.commit('setVisibleShow',false)
            }

            if(data.success){
                this.$emit('uploadData')
                this.$store.commit('setVisibleShow',false)
                if(data.msg){
                    var array = data.object;
                    var str = "";
                    str += this.$t('import.success')+array[0]+this.$t('card.dataNum')+",";
                    str += this.$t('import.failed')+array[1]+this.$t('card.dataNum')+"<br/>";
                    if(array[1] > 0){
                        str += this.$t('card.hasExit')+":<br/>"+data.msg;
                    }
                    this.$alert(str, {
                        dangerouslyUseHTMLString:true,
                        confirmButtonText: this.$t('sure')
                    });
                }
            }else{
                this.$message.error(this.$t('index.control_fail'))
            }
        }
    }
};
</script>

<style lang="less">
.alert{
    width: 100%;
    font-size: 12px;
    color: red;
    text-align: center;
}
</style>
